<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>客服</title>
  <style type = "text/css">
  *{
   margin : 0;
   padding: 0;
   overflow: hidden;
   }
 body{
 	background-size: 100% 100%;
 	background-image: url(img/background.png);
 	background-attachment: fixed;
 }
  .image{
      position: absolute;
      top: 6vh;
      left: 26vw;
      width: 111vh;
      height: 43vw;
  		}
   .image2{
    position: absolute;
    top: 46vh;
    left: 32vw;
    width: 32vh;
    height: 7vw;
    
   }
   .image3{
  		position: absolute;
        top: 46vh;
        left: 54vw;
        width: 32vh;
        height: 7vw;
   }
   .image02{
  		position: absolute;
        top: 48vh;
        left: 47vw;
        width: 10vh;
        height: 5vw;
  		opacity: 0;
   }
   .image03{
  			position: absolute;
           top: 48vh;
           left: 69vw;
           width: 10vh;
           height: 5vw;
     opacity: 0;  
   }
   .next{
    position: absolute;
    top: 83vh;
    left: 83vw;
    width: 17vh;
    height: 5vw;
    
   }

  </style>
 </head>
 <body class="body">
 <img class="image" src="img/choose.png">
 <img class="image2" src="img/button01.png">
 <img class="image02" src="img/wrong.png">
 <img class="image3" src="img/button02.png">
 <img class="image03" src="img/right.png">
 <a href="teachf.html"><img class="next" src="img/icons.png"></a>
 </body>
 <script>
 var button01 = document.querySelector(".image2") ;
 var button02 = document.querySelector(".image3") ;
 var wrong= document.querySelector(".image02") ;
 var right = document.querySelector(".image03") ;
 button01.addEventListener('click',function(){
  wrong.style.opacity=1;
  right.style.opacity=0;
 })   
 button02.addEventListener('click',function(){
  wrong.style.opacity=0;
  right.style.opacity=1;
 }) 

 </script>
 
</html>